import React, { useReducer, useEffect } from 'react'
import './skill.css'
import { Icon } from 'antd-mobile';
import { initState, actions, getList, reducer } from './reducer'
import { getKill } from '../../../../request/api'

export default function Skill() {
    const [state, dispatch] = useReducer(reducer, initState)
    useEffect(() => {
        getKill().then(res => {
            dispatch(actions.changeList(res.list))

        })

    }, [])
    let arr = getList(state)
    return (
        <div>
            <div className="skill_wrap">
                <div className="skill_header">
                    <div className="skill_h_l">
                        <span>限时秒杀</span>
                        <span>信任特价商品专区</span>
                        <span>(限量供应,先到先得)</span>

                    </div>
                </div>
                <div className="skill_con">
                    <ul>
                        {
                            arr.map(item => {
                                return <li key={item.id}>
                                    <img src={item.img} alt="" />
                                    <div className="skill_text">
                                        <div className="skill_n_L">
                                            <div className="skill_n_price">{item.price}</div>
                                            <div className="skill_n_mark_P"><del>{item.market_price}</del></div>
                                        </div>
                                        <div className="skill_n_r" >
                                            <Icon type="search" />
                                        </div>
                                    </div>
                                </li>
                            })
                        }
                    </ul>
                </div>
            </div>
            <div className="doublekill">
                <div className="dou_l">
                    <div>双11尖货预约</div>
                    <img className="dou_l_img" src="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF" alt="" />
                </div>
                <div className="dou_r">
                    <div className="dou_text">畅购全球</div>
                    <div className="dou_img">
                        <img src="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF" alt="" />
                        <img src="https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF" alt="" />
                    </div>
                </div>
            </div>

        </div>
    )
}
